<template>
  <!-- Vue3组件中的模板结构没有根标签 -->
  <h1>一个人的信息</h1>
  <h2>姓名：{{name}}</h2>
  <h2>年龄:{{age}}</h2>
  <h2>性别:{{sex}}</h2>
  <button @click="sayHello">说话</button><br><br>
  <button @click="sayWelcome">说话(Vue2配置的)</button><br><br>
  <button @click="test1">Vue2读取vue3中的数据方法</button><br><br>
  <button @click="test2">Vue3 setup中读取vue2中的数据方法</button><br><br>
</template>

<script>
  // import {h} from 'vue'
  export default {
    name: 'App',
    data() {
      return {
        sex:'男',
      }
    },
    methods:{
      sayWelcome(){
        console.log('欢迎');
      },
      test1(){
        console.log(this.sex);
        console.log(this.name)
        console.log(this.age);
        // console.log(this.sayHello);
        this.sayHello()
      }
    },
    //此处只是测试一下setup，暂时不考虑响应式问题
    //setup 不能加async否则模板访问不到数据,因为添加以后返回的不再是一个单纯的对象而是一个pormise函数
    setup() {
      let name  = '张三'
      let age = 18
      let a = 200
      function sayHello () {
         console.log(`我的名字是${name},今年${age}岁`);
       }
      function test2(){
        console.log(name)
        console.log(age);
        console.log(sayHello);
        console.log(this.sex);
        console.log(this.sayWelcome);
      }
       //返回一个对象(常用)
      return {
        name,
        age,
        sayHello,
        test2,
        a
      }
      //返回一个函数(渲染函数)
      // return ()=> h('h1','菜鸟')
    }
  }
</script>

<style>
  #app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
  }
</style>
